<!-- components/MemberCard.vue -->
<template>
  <el-card class="member-card w-20rem">
    <div class="member-content">
      <div class="member-avatar-wrapper">
        <div class="member-avatar-border">
          <div class="member-avatar">
            <img 
              :src="getMemberImage(member.avatar)" 
              :alt="member.name"
              class="w-full h-full object-cover rounded-full"
            >
          </div>
        </div>
      </div>
      
      <h3 class="member-name">{{ member.name }}</h3>
      <p class="member-title">{{ member.title }}</p>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

interface Member {
  name: string;
  avatar: string;
  title: string;
}

defineProps<{
  member: Member;
}>();

const getMemberImage = (filename: string) => {
  return `https://picsum.photos/seed/${filename}/200/200`;
};
</script>

<style lang="scss" scoped>
.member-card {
  background: #fff;
  border: 1px solid #d4c1b3;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 240px; /* 固定卡片宽度 */
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    
    // .member-avatar-border {
    //   box-shadow: 0 0 0 4px #e74c3c;
    // }
  }
}

/* 其余样式保持不变... */
</style>